<template>
  <m-layout type="primary">
    <mt-header slot="header" title="页面标题">
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body" class="demos">
      <h4>MLayout,MSection 三种页面布局风格</h4>
      <div class="tc">
        <router-link class="link" to="/layout">风格一</router-link>
        <router-link class="link" to="/layout/primary">风格二</router-link>
        <router-link class="link" to="/layout/special">风格三</router-link>
      </div>
      <h4>MCalendarRange</h4>
      <div class="tc">
        <m-calendar-range v-model="calendarRangeValue"/>
      </div>
      <h4>EImg</h4>
      <div class="tc">
        <e-img style="width: 200px;height: 200px"/>
      </div>
      <h4>EAvatar</h4>
      <div class="tc">
        <e-avatar style="width: 200px;height: 200px"/>
      </div>
      <h4>EHeading</h4>
      <e-heading>标题文字<small>标题辅助文字</small></e-heading>
      <h4>EPlaceholder</h4>
      <e-placeholder />
      <h4>MDivider</h4>
      <m-divider>
        <div style="padding:10px 0">内容...</div>
      </m-divider>
      <h4>MFlexbox&MFlexboxItem</h4>
      <m-flexbox>
        <e-avatar style="width: 60px;height: 60px"/>
        <m-flexbox-item>
          <h4 style="margin:0">深圳星空体育培训学校</h4>
          <small class="weak">担任职务：教练员</small>
        </m-flexbox-item>
      </m-flexbox>
      <br/>
      文档地档：<br/>
      <a class="link" href="https://doc.vux.li/zh-CN/components/flexbox.html" target="_blank">https://doc.vux.li/zh-CN/components/flexbox.html</a>
      <h4>MInput</h4>
      <m-input v-model="value" number-word maxlength="50" placeholder="请输入内容" />
      <m-input v-model="value" type="textarea" number-word maxlength="50" placeholder="请输入多行内容" />
      <h4>MSelectOuter</h4>
      <m-select-outer>
        <select>
          <option value="">请选择城市</option>
          <option value="1">北京</option>
          <option value="2">上海</option>
          <option value="3">广州</option>
          <option value="4">深圳</option>
        </select>
      </m-select-outer>
      <h4>MSelect,MOption {{selectValue}}</h4>
      <m-select v-model="selectValue" placeholder="请选择城市">
        <m-option value="1" label="北京"><e-img style="width: 60px;height: 60px"/>北京</m-option>
        <m-option value="2" label="上海"><e-img style="width: 60px;height: 60px"/>上海</m-option>
        <m-option value="3" label="广州"><e-img style="width: 60px;height: 60px"/>广州</m-option>
        <m-option value="4" label="深圳"><e-img style="width: 60px;height: 60px"/>深圳</m-option>
        <m-option value="5" label="北京"><e-img style="width: 60px;height: 60px"/>北京</m-option>
        <m-option value="6" label="上海"><e-img style="width: 60px;height: 60px"/>上海</m-option>
        <m-option value="7" label="广州"><e-img style="width: 60px;height: 60px"/>广州</m-option>
        <m-option value="8" label="深圳"><e-img style="width: 60px;height: 60px"/>深圳</m-option>
      </m-select>
      <h4>EPassword</h4>
      <e-password v-model="value" placeholder="请输入密码" />
      <h4>EImgCode</h4>
      <e-img-code v-model="value" />
      <h4>ESmsCode</h4>
      <e-sms-code v-model="value" :params="{account: '15889750621', type: 4, extisted: true}"  />
      <h4>MCheckbox,MCheckboxGroup {{checkboxValue}}</h4>
      友情提醒：mint-ui的checklist组件就不要用
      <m-checkbox-group v-model="checkboxValue">
        <m-checkbox
           v-for="item in options"
          :disabled="item.disabled"
          :value="item.value"
          :key="item.value"
          >
          {{item.label}}
        </m-checkbox>
      </m-checkbox-group>
      <br/>
      文档地档：<br/>
      <a class="link" href="http://vx.bittyos.com/#/checkbox" target="_blank">http://vx.bittyos.com/#/checkbox</a>
      <h4>MImgUpload</h4>
      <m-img-upload v-model="imgUploadValue" />
      <h4>MImgGroupUpload</h4>
      <m-img-group-upload v-model="imgGroupUploadValue" />
      <h4>MCascader({{cascaderValue}})</h4>
      <div class="tc">
        <m-cascader v-model="cascaderValue"/>
      </div>
      <h4>MAddressCascader({{cascaderAddressValue}})</h4>
      <div class="tc">
        <m-address-cascader v-model="cascaderAddressValue"/>
      </div>
      <h4>TextOmit</h4>
      <text-omit :text="text" max="30" />
      <h4>MTag</h4>
      <m-tag type="success">success</m-tag>
      <m-tag type="warning">warning</m-tag>
      <m-tag type="error">error</m-tag>
      <m-tag type="link">link</m-tag>
      <m-tag type="primary">primary</m-tag>
      <m-tag plain type="success">success</m-tag>
      <m-tag plain type="warning">warning</m-tag>
      <m-tag plain type="error">error</m-tag>
      <m-tag plain type="link">link</m-tag>
      <m-tag plain type="primary">primary</m-tag>
    </div>
    <div slot="bottom">
      <mt-button type="primary" size="large">底部按钮</mt-button>
    </div>
  </m-layout>
</template>

<script>
import EPassword from '@e-ui/Password'
import EImgCode from '@e-ui/ImgCode'
import ESmsCode from '@e-ui/SmsCode'
import MImgUpload from '@/views/components/ImgUpload'
import MImgGroupUpload from '@/views/components/ImgGroupUpload'
import MCalendarRange from '@/views/components/CalendarRange'
import MCascader from '@/views/components/Cascader'
import MAddressCascader from '@/views/components/AddressCascader'
import TextOmit from '@/views/components/TextOmit'
export default {
  components: {
    EPassword,
    EImgCode,
    ESmsCode,
    MImgUpload,
    MImgGroupUpload,
    MCalendarRange,
    MCascader,
    MAddressCascader,
    TextOmit
  },
  data () {
    return {
      value: '',
      selectValue: '',
      imgUploadValue: '',
      imgGroupUploadValue: [],
      checkboxValue: [],
      calendarRangeValue: [],
      cascaderValue: [],
      cascaderAddressValue: [],
      options: [
        {
          value: '1',
          label: '篮球'
        },
        {
          value: '2',
          label: '羽毛球'
        },
        {
          value: '3',
          label: '乒乓球',
          disabled: true
        },
        {
          value: '4',
          label: '高尔夫'
        }
      ],
      text: '一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十'
    }
  }
}
</script>

<style lang="scss">
  .demos{
    padding:0.16rem;
    >h4{
      margin-top:30px;
      text-align:center;
    }
  }
</style>
